import { SendReq } from "../vo/request"
import { Modal, Form, Input, message, Select } from 'antd';
import "./start-frame.less"

export function ModalForm(props:any) {
    // const [Visable, SetVisable] = useState(false);
    const [form] = Form.useForm();
    const { TextArea } = Input;
    const { Option } = Select;
    const send = async (items: any) => {
        let res = await SendReq(items);
        if(res.data){
            props.SetVisable(false);
            message.success("创建成功！");
            props.setRightUpdate(Math.random());
        }else{
            props.SetVisable(false);
            message.error("创建失败");
        }
    }
    return (
        <Modal
            visible={props.Visable}
            okText="确认"
            cancelText="取消"
            title="新建项目"
            onOk={
                () => {
                    form
                        .validateFields()
                        .then(values => {
                            form.resetFields();
                            send(values);
                        })
                        .catch(info => {
                            console.log('Validate Failed:', info);
                        });
                }
            }
            onCancel={
                () => {
                    props.SetVisable(false);
                }
            }
        >
            <Form
                form={form}
                layout="vertical"
                initialValues={{groupId:props.data.groupId}}
            >
                <Form.Item
                    name="projectName"
                    label="项目名称"
                    rules={[
                        {
                            required: true,
                            message: "请输入项目名称"
                        }
                    ]}
                >
                    <Input />
                </Form.Item>
                <Form.Item
                    name="groupId"
                    label="所属分组"
                    rules={[
                        {
                            required: true,
                            message: "请输入所属分组"
                        }
                    ]}
                >
                    <Select>
                        {
                            props.list.map((item:any,index:number)=>{
                                return <Option key={index} value={item.groupId}>{item.groupName}</Option>
                            })
                        }
                       
                    </Select>
                </Form.Item>

                <Form.Item 
                    name="projectPath" 
                    label="基本路径"
                    
                >
                    <Input />
                </Form.Item>

                <Form.Item name="description" label="描述">
                    <TextArea autoSize={{ minRows: 2, maxRows: 4 }} />
                </Form.Item>

            </Form>
        </Modal>
    )

}
